<template v-cloak>
  <view class="mine">
    <view class="zr" style="padding:20rpx 0px">
      <view class="user_box flex">
        <view class="userInfo">
          <view class="avatar" v-if="avatar">
            <image :src="avatar" mode="widthFix"></image>
          </view>
          <view class="avatar" v-else @click="getUserProfile">
            <image src="/static/logo.png" mode="widthFix"></image>
          </view>
        </view>
        <view class="userInfo_name">
          <view class="user-info" v-if="avatar">
            <view class="user">{{ nickname }}</view>
            <view class="phone">欢迎来到前端知识小程序</view>
          </view>
          <view class="user-info" v-else @click="getUserProfile">
            <view class="user"> 点击登录</view>
            <view class="phone">登录查看更多</view>
          </view>
        </view>
      </view>
      <view class="water">
        <view class="water-c">
          <view class="water-1"> </view>
          <view class="water-2"> </view>
        </view>
      </view>
    </view>
    <view class="cate flex-around">
      <view class="cate-item">
        <u-count-to
          :start-val="0"
          color="#8486f8"
          :end-val="countObj.article_nums"
          :duration="2000"
          :use-easing="false"
        ></u-count-to>

        <view class="title">文章</view>
      </view>
      <view class="cate-item">
        <u-count-to
          :start-val="0"
          color="#ff0000"
          :end-val="countObj.cate_nums"
          :duration="2000"
          :use-easing="false"
        ></u-count-to>
        <view class="title">分类</view>
      </view>
      <view class="cate-item" color="#59df10">
        <u-count-to
          :start-val="0"
          color="#59df10"
          :end-val="countObj.label_nums"
          :duration="2000"
          :use-easing="false"
        ></u-count-to>

        <view class="title">标签</view>
      </view>
      <view class="cate-item">
        <u-count-to
          :start-val="0"
          color="#5fc9cb"
          :end-val="countObj.topic_nums"
          :duration="2000"
          :use-easing="false"
        ></u-count-to>

        <view class="title">专题</view>
      </view>
    </view>

    <view class="dynamic br10">
      <view class="cell">
        <view
          class="cell-item flex-between"
          @click="HandleCommonNav('/pages/mine/log/log')"
        >
          <div class="image">
            <image src="/static/icon/log.png" mode="widthFix"></image>
          </div>
          <view class="title">更新日志</view>
          <view class="arror">
            <image
              src="/static/icon/icon_right_arror.png"
              mode="widthFix"
            ></image>
          </view>
        </view>

        <view
          class="cell-item flex-between"
          @click="HandleCommonNav('/pages/mine/disclaimer/disclaimer')"
        >
          <div class="image">
            <image src="/static/icon/disclaimer.png" mode="widthFix"></image>
          </div>
          <view class="title">免责声明</view>
          <view class="arror">
            <image
              src="/static/icon/icon_right_arror.png"
              mode="widthFix"
            ></image>
          </view>
        </view>
        <view class="cell-item flex-between">
          <div class="image">
            <image src="/static/icon/opinion.png" mode="widthFix"></image>
          </div>
          <view class="title">
            <button open-type="feedback">意见反馈</button>
          </view>
          <view class="arror">
            <image
              src="/static/icon/icon_right_arror.png"
              mode="widthFix"
            ></image>
          </view>
        </view>

        <view class="cell-item flex-between">
          <div class="image">
            <image src="/static/icon/consult.png" mode="widthFix"></image>
          </div>
          <view class="title">
            <button open-type="contact">联系客服</button>
          </view>
          <view class="arror">
            <image
              src="/static/icon/icon_right_arror.png"
              mode="widthFix"
            ></image>
          </view>
        </view>
        <view
          class="cell-item flex-between"
          @click="HandleCommonNav('/pages/mine/author/author')"
        >
          <div class="image">
            <image src="/static/icon/author_vx.png" mode="widthFix"></image>
          </div>
          <view class="title">联系作者</view>
          <view class="arror">
            <image
              src="/static/icon/icon_right_arror.png"
              mode="widthFix"
            ></image>
          </view>
        </view>
        <view class="cell-item flex-between">
          <div class="image">
            <image src="/static/icon/version.png" mode="widthFix"></image>
          </div>
          <view class="title"
            >版本 <text v-if="version"> {{ version }}</text></view
          >
          <view class="arror">
            <!-- <image src="/static/icon/icon_right_arror.png" mode=""></image> -->
          </view>
        </view>
      </view>
    </view>
    <view class="logout" @click="LogOut" v-if="avatar">
      <view class="title">退出登录</view>
    </view>
    <u-modal
      v-model="show"
      :show-title="false"
      :show-confirm-button="false"
      :mask-close-able="true"
    >
      <view class="slot-content">
        <view class="image-app">
          <view v-for="(v, i) in imageUrl" :key="i" @click="saveImgToLocal(v)">
            <image :src="v" mode="widthFix"></image>
          </view>
        </view>
        <view class="title"> 保存二维码 </view>
      </view>
    </u-modal>
    <u-no-network></u-no-network>
    <view class="copyright">
      <view class="gray-logo">
        <view class="image">
          <image src="/static/gray_logo.png" mode="widthFix"></image>
        </view>
        <view class="copyright-title"> © 前端知识博客 </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      token: "",
      nickname: "",
      avatar: "",
      countObj: {
        article_nums:10,
        cate_nums:10,
        label_nums:10,
        topic_nums:10,
      },
      version: "",
      show:false,
      imageUrl:[]
    }
  },
  onLoad() {
     // #ifdef MP-WEIXIN
      // this.login()
      // this.version = wx.getAccountInfoSync().miniProgram.version
     // #endif
  },
  onShow() {
    this.getToken()
    this.getCountList()
  },
  methods: {
    // 微信授权
    getUserProfile(e) {
      let _self = this
      uni.getUserProfile({
        desc: "用于完善会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: res => {
          let data = {
            encryptedData: res.encryptedData,
            iv: res.iv,
            sessionKey: uni.getStorageSync("session_key"),
            openId: uni.getStorageSync("openid"),
          }
          _self.$store.dispatch("user/login", data).then(res => {
            uni.setStorageSync("avatar", res.data.avatarUrl)
            uni.setStorageSync("nickname", res.data.nickName)
            uni.setStorageSync("token", res.token)
            _self.getToken()
          })
        },
      })
    },
    // 进入页面 使用uni.login方法 获取到code 通过code拿到session_key、open_id
    login() {
      let _self = this
      uni.login({
        provider: "weixin",
        success: function (loginRes) {
          let data = { code: loginRes.code }
          _self.$store.dispatch("user/code", data).then(res => {
            uni.setStorageSync("openid", res.openid)
            uni.setStorageSync("session_key", res.session_key)
          })
        },
      })
    },
    HandleView(id) {
      uni.navigateTo({
        url: "/pages/detail/detail?id=" + id,
      })
    },
    HandleCommonNav(url) {
      let avatar = uni.getStorageSync("avatar")
      if (!avatar) {
        uni.navigateTo({
          url: "/pages/login/login",
        })
        return
      }
      uni.navigateTo({
        url,
      })
    },
    LogOut() {
      let _self = this
      uni.showModal({
        content: "退出登录",
        success: function (res) {
          if (res.confirm) {
            uni.removeStorageSync("openid")
            uni.removeStorageSync("session_key")
            uni.removeStorageSync("nickname")
            uni.removeStorageSync("avatar")
            uni.removeStorageSync("token")
            _self.login()
            _self.getToken()
            uni.navigateTo({
              url:"/pages/login/login"
            })
          }
        },
      })
    },
    getToken() {
      this.token = uni.getStorageSync("token")
      this.avatar = uni.getStorageSync("avatar")
      this.nickname = uni.getStorageSync("nickname")
    },
    getCountList() {
      // this.$store.dispatch("article/count").then(res => {
      //   console.log(res.data)
      //   this.countObj = res.data
      //   console.log(this.countObj)
      // })
    },
  },
}
</script>

<style scoped lang="scss"></style>
